<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 600px;
    }
    .top {
      display: flex;
      width: 100%;
      height: 50px;
      background-color: gray;
    }
    .center {
      display: flex;
      flex: 1;
      background-color: lightgray;
    }
    .center .left {
      width: 300px;
      background-color:darkgray;
    }
    .bottom {
      display: flex;
      width: 100%;
      height: 50px;
      background-color: gray;
    }
  </style>
</head>
<body>
<div class="top"></div>
<div class="center">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
